.city-selector {
    position: relative;
    height: 100%;
    background: #fff;
    padding: 8px 16px 0;

    .current-city {
        width: 100%;
        height: 36px;
        display: flex;
        background: rgb(243, 243, 243);
        border-radius: 0;
        font-size: 14px;
        align-items: center;
        position: relative;
        margin-bottom: 8px;

        .desc {
            font-weight: bold;
            color: rgba(0, 0, 0, 0.9);
            margin-left: 12px;
        }

        .current {
            color: rgba(0, 0, 0, 0.5);
            margin-left: 8px;
            width: 165px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .location {
            width: 20px;
            height: 20px;
            position: absolute;
            right: 72px;
            top: 8px;
        }

        .refresh {
            color: rgb(187, 128, 73);
            font-weight: bold;
            margin-left: 4px;
            position: absolute;
            right: 12px;
            top: 8px;
        }

    }

    .cityData-container {
        width: 100%;
        height: 320px;
        margin-top: 8px;
        display: flex;

        .province {
            width: 161px;
            height: 100%;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            text-align: left;
            border-right: 1px solid rgba(0, 0, 0, 0.1);
            font-size: 14px;
            color: rgba(0, 0, 0, 0.9);
            padding-bottom: 12px;
            padding-right: 16px;

            .province-item {
                width: 129px;
                height: 36px;
                margin: 4px 0;
                text-align: center;
                line-height: 36px;
                flex-shrink: 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

            }

            .item-selected {
                background: rgb(187, 128, 73);
                color: #fff;
            }
        }

        .city {
            width: calc(100% - 88px);
            // display: flex;
            flex-wrap: wrap;
            gap: 8px;
            max-height: 320px;
            overflow-y: auto;
            box-sizing: border-box;
            padding-left: 31px;
            padding-bottom: 12px;
            align-content: flex-start; //把多行 flex-line 顶部对齐，不再拉伸填满容器

            .city-item {
                flex: 0 0 calc((100% - 16px) / 3);
                height: 36px;
                text-align: left;
                line-height: 36px;
                border-radius: 4px;
                box-sizing: border-box;
                font-size: 14px;
                color: rgba(0, 0, 0, 0.9);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .city-item-selected {
                background-image: url('https://file.linkcook.cn/image/wineMiniProgram/activity/select.png');
                background-position: right center;
                background-repeat: no-repeat;
                background-size: 15px 10px;
                color: rgb(187, 128, 73) !important;
            }
        }
    }

    .selector-btn {
        display: flex;
        height: 64px;
        align-items: center;

        .restore {
            width: 115px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            color: rgba(0, 0, 0, 0.9);
            font-size: 14px;
            background: rgb(244, 244, 244);
        }

        .sure {
            width: calc(100% - 131px);
            margin-left: 16px;
            height: 36px;
            text-align: center;
            line-height: 36px;
            color: #fff;
            font-size: 14px;
            background: rgba(0, 0, 0, 0.9);
        }
    }
}